<template>
  <section class="component warehousing-audit">
    <el-form :model="fromData" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：">
            {{rowData.caseNumber}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次号：">
            {{rowData.batchNumber}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="委托方：">
            {{rowData.principalName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名：">
            {{rowData.personalName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上牌地：">
            {{rowData.boardAddress}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号：">
            {{rowData.plateNum}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务团队：">
            {{rowData.partnerName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="贷款银行：">
            {{rowData.bankName}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入库申请人：">
            {{rowData.applyRealName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请时间：">
            {{rowData.applyTime | dateFormat}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年检到期日期：">
            {{rowData.inspectionDate | dateFormat}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公里数：">
            {{rowData.kilometres}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="评估价：">
            {{rowData.valuationPrice}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="VIN码：">
            {{rowData.carFrameNo}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="钥匙数量：">
            {{rowData.keysNumber | dictConvert('KeysNumber')}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否有行驶证：">
            {{rowData.haveNotFlag | dictConvert('CommonFlag')}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="rowData.warehouseCarStatus !== 'IN_WAREHOUSE_WAIT_APPROVED'">
        <el-col :span="12">
          <el-form-item label="出库类型：">
            {{rowData.warehouseOutType | dictConvert('WarehouseOutType')}}
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="rowData.warehouseOutType !=='PERMANENT_OUT'">
          <el-form-item label="预计归还时间：">
            {{rowData.planReturnTime | dateTimeFormat}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注：">
        {{rowData.remark}}
      </el-form-item>
      <el-form-item label="车辆图片：" prop="name" v-if="rowData.warehouseCarStatus === 'IN_WAREHOUSE_WAIT_APPROVED'">
        <ul>
          <li v-for="item in fileList" :key="item.id">
            <img :src="item.url" alt="" @click="clickHandle(item)">
          </li>
        </ul>
      </el-form-item>
      <el-form-item label="审核记录：">
        <data-box :data="rowData.warehouseRecords">
          <template slot="columns">
            <el-table-column prop="type" label="审核类型" :formatter="(row) => $filter.dictConvert(row.type,'CarApprovalType')" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="operatorRealName" label="审核人" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="createTime" label="审核时间" :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="carApplyStatus" label="审核结果" :formatter="(row) => $filter.dictConvert(row.carApplyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="remark" label="备注" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <el-form-item label="审核结果" prop="carApplyStatus">
        <el-select placeholder="请选择" v-model="fromData.carApplyStatus" clearable>
          <el-option v-for="{index,name,code} in $dict.getDictData('CarApplyStatus')" :key="index" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input type="textarea" v-model="fromData.remark" style="width:97%" maxlength="300" show-word-limit></el-input>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="commit" :loading="loading">确定</el-button>
    </div>

    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="400px">
      <img width="360px" :src="dialogImageUrl" alt="">
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
import { FileUploadService } from "~/services/file-service/file-upload.service";
import { Dependencies } from "~/core/decorator";
import FlieUpload from '~/components/common/file-upload.vue'
import { CarManageService } from '~/services/domain-service/car-manage.service'

@Component({
  components: {
    FlieUpload
  }
})

export default class WarehousingAudit extends Vue {
  @Prop() private rowData
  @Dependencies(FileUploadService) private fileUploadService: FileUploadService
  @Dependencies(CarManageService) private carManageService: CarManageService

  private rules: any = {
    carApplyStatus: { required: true, message: '请选择审核结果' }
  }
  private dialogVisible: boolean = false
  private dialogImageUrl: string = ''
  private fileList: any = []
  private loading: boolean = false
  private fromData: any = {
    carApplyStatus: '',
    remark: ''
  }

  @Emit('close') private emitClose() {
    this.reset()
  }

  private commit() {
    const from: any = this.$refs['ruleForm']
    from.validate((valid) => {
      if (!valid) return
      this.loading = true
      this.carManageService.warehouseApproval({ id: this.rowData.id, ...this.fromData }).subscribe(data => {
        this.loading = false
        this.$message.success('操作成功！')
        this.emitClose()
      }, error => { this.loading = false })
    })
  }

  private imageFileList() {
    if (this.rowData.warehouseCarStatus !== 'IN_WAREHOUSE_WAIT_APPROVED') return
    if (!this.rowData.imageIds) return
    this.fileUploadService.getAllUploadFileByIds(this.rowData.imageIds).subscribe(data => {
      this.fileList = data
    })
  }

  private clickHandle(item) {
    this.dialogImageUrl = item.url;
    this.dialogVisible = true;
  }

  private reset() {
    const from: any = this.$refs['ruleForm']
    from.resetFields()
    this.fileList = []
  }
}
</script>

<style lang="less">
.component.warehousing-audit {
  max-height: 500px;
  overflow-y: auto;
  ul {
    max-height: 100px;
    overflow-y: auto;
    padding: 0;
    li {
      list-style: none;
      margin-right: 10px;
      margin-bottom: 10px;
      float: left;
      img {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        border: 0;
        cursor: pointer;
      }
    }
  }
}
</style>